import { ActivityCard } from '@/components/ui'

interface FeaturedActivitiesProps {
  onActivityClick?: (activity: any) => void
}

const mockActivities = [
  {
    id: '1',
    title: '周末亲子故事会',
    description: '专业老师带领，分享经典绘本故事，培养孩子的阅读兴趣和表达能力',
    cover_image_url: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=teacher%20reading%20to%20children%2C%20cozy%20library%20setting%2C%20colorful%20picture%20books%2C%20warm%20lighting&image_size=square',
    start_time: '2024-06-15 10:00',
    end_time: '2024-06-15 11:30',
    location: '绘本岛阅读空间',
    price: 0,
    current_participants: 15,
    max_participants: 20,
    category: { id: '1', name: '故事会' }
  },
  {
    id: '2',
    title: '亲子手工创作课',
    description: '家长和孩子一起动手制作有趣的手工作品，增进亲子感情，培养创造力',
    cover_image_url: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=parents%20and%20children%20doing%20crafts%2C%20colorful%20art%20materials%2C%20creative%20atmosphere%2C%20happy%20faces&image_size=square',
    start_time: '2024-06-16 14:00',
    end_time: '2024-06-16 16:00',
    location: '创意手工坊',
    price: 68,
    current_participants: 8,
    max_participants: 12,
    category: { id: '2', name: '手工课' }
  },
  {
    id: '3',
    title: '自然探索亲子营',
    description: '户外自然教育活动，观察植物昆虫，学习自然科学知识，享受户外时光',
    cover_image_url: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=family%20exploring%20nature%2C%20children%20observing%20plants%2C%20outdoor%20educational%20activity%2C%20sunny%20day&image_size=square',
    start_time: '2024-06-22 09:00',
    end_time: '2024-06-22 12:00',
    location: '城市公园',
    price: 128,
    current_participants: 12,
    max_participants: 15,
    category: { id: '3', name: '户外活动' }
  }
]

export function FeaturedActivities({ onActivityClick }: FeaturedActivitiesProps) {
  return (
    <div className="px-4 py-6 bg-gradient-to-b from-huiben-cream to-white">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <span className="text-huiben-green text-xl">🎪</span>
          <h2 className="text-lg font-bold text-huiben-sky-dark">亲子活动</h2>
        </div>
        <button className="text-sm text-huiben-sky hover:text-huiben-sky-dark transition-colors">
          查看更多 →
        </button>
      </div>
      
      <div className="space-y-4">
        {mockActivities.map((activity) => (
          <ActivityCard
            key={activity.id}
            title={activity.title}
            description={activity.description}
            coverUrl={activity.cover_image_url}
            startTime={activity.start_time}
            endTime={activity.end_time}
            location={activity.location}
            price={activity.price}
            currentParticipants={activity.current_participants}
            maxParticipants={activity.max_participants}
            onClick={() => onActivityClick?.(activity)}
          />
        ))}
      </div>
    </div>
  )
}